<!--
 * @Author: 张升 1562821455@qq.com
 * @Date: 2023-12-19 11:37:24
 * @LastEditors: 张升 1562821455@qq.com
 * @LastEditTime: 2024-09-12 20:04:23
 * @FilePath: \school-admin-webc:\Users\Administrator\Desktop\aa.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>边框表格</title>
</head>

<body>
    <div id="app">
        <div class="schedule">
            <div class="schedule_list">
                <div class="schedule_list_title">
                    <div style="flex: 0 0 20%">姓名</div>
                    <div style="flex: 0 0 20%">排</div>
                    <div style="flex: 0 0 20%">班</div>
                    <div style="flex: 0 0 20%">床位号</div>
                    <div style="flex: 0 0 20%">时间段</div>
                </div>
    
                <div
                    class="schedule_list_data"
                >
                    <div v-for="(item, index) in scheduleList" :key="index" class="schedule_list_item">
                        <div style="flex: 0 0 20%">{{ item.name }}</div>
                        <div style="flex: 0 0 20%">{{ item.gradeName }}</div>
                        <div style="flex: 0 0 20%">{{ item.className }}</div>
                        <div style="flex: 0 0 20%">{{ item.bedName }}</div>
                        <div style="flex: 0 0 20%">{{ item.time }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            scheduleList: [
                {
                    name: "张三",
                    gradeName: "一年级",
                    className: "一班",
                    bedName: "101",
                    time: "10:00-12:00"
                },
                {
                    name: "李四",
                    gradeName: "一年级",
                    className: "一班",
                    bedName: "102",
                    time: "10:00-12:00"
                },
                {
                    name: "王五",
                    gradeName: "一年级",
                    className: "一班",
                    bedName: "103",
                    time: "10:00-12:00"
                },
                {
                    name: "赵六",
                    gradeName: "一年级",
                    className: "一班",
                    bedName: "104",
                    time: "10:00-12:00"
                },
                {
                    name: "孙七",
                    gradeName: "一年级",
                    className: "一班",
                    bedName: "105",
                    time: "10:00-12:00"
                },
                {
                    name: "周八",
                    gradeName: "一年级",
                    className: "一班",
                    bedName: "106",
                    time: "10:00-12:00"
                },
                {
                    name: "吴九",
                    gradeName: "一年级",
                    className: "一班",
                    bedName: "107",
                    time: "10:00-12:00"
                },
                {
                    name: "郑十",
                    gradeName: "一年级",
                    className: "一班",
                    bedName: "108",
                    time: "10:00-12:00"
                },
                {
                    name: "王十一",
                    gradeName: "一年级",
                    className: "一班",
                    bedName: "109",
                    time: "10:00-12:00"
                },
                {
                    name: "赵十二",
                    gradeName: "一年级",
                    className: "一班",
                    bedName: "110",
                    time: "10:00-12:00"
                },
                {
                    name: "孙十三",
                    gradeName: "一年级",
                    className: "一班",
                    bedName: "111",
                    time: "10:00-12:00"
                },
                {
                    name: "周十四",
                    gradeName: "一年级",
                    className: "一班",
                    bedName: "112",
                    time: "10:00-12:00"
                },
                {
                    name: "吴十五",
                    gradeName: "一年级",
                    className: "一班",
                    bedName: "113",
                    time: "10:00-12:00"
                },
            ],
        },
        methods: {
        },
        mounted() {
        }
    })
</script>
<style>
    .schedule {
        width: 600px;
        height: 220px;
        color: #000;
        border: 1px solid #000;
    }
    
    .schedule_list {
        width: 100%;
        height: 100%;
        font-size: 14px;
    }
    
    .schedule_list_title {
        width: 100%;
        height: 44px;
        display: flex;
        line-height: 44px;
        font-size: 14px;
        font-weight: 700;
        border-bottom: 1px solid #000;
    }
    .schedule_list_title > div{
        text-align: center;
    }
    .schedule_list_title > :not(:first-child){
        border-left: 1px solid #000;
    }
    .schedule_list_data{
        position: relative;
        height: calc(100% - 44px);
        overflow: auto;
    }
    .schedule_list_item{
        display: flex;
        border-bottom: 1px solid #000;
    }
    .schedule_list_item > div{
        text-align: center;
        height: 44px;
        line-height: 44px;
    }
    .schedule_list_item > :not(:first-child){
        border-left: 1px solid #000;
    }
    .schedule_list_data::-webkit-scrollbar {
        display: none;
    }
</style>

</html>